import React, { useEffect, useMemo } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Table, Button, Switch, Row, Divider } from 'antd';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import Store from './store';



const HomePage = () => {
  const pageStore = React.useContext(Store);
  // console.log(pageStore);
  // 页面加载获取数据
  useEffect(() => {
    // pageStore.qryTableDate();
  }, []);

  const columns = useMemo(
    () => [
      {
        title: '序号',
        dataIndex: 'id',
        ellipsis: true,
      },
      {
        title: '代码层级',
        dataIndex: 'level',
        ellipsis: true,
      },
      {
        title: '代码行数',
        dataIndex: 'number',
        ellipsis: true,
      },
      {
        title: '方法名称',
        dataIndex: 'methodName',
        ellipsis: true,
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width: 150,
        render: (text, record) => (
          <Row type="flex" align="middle" className="operation">
            <Button
              type="link"
              disabled={record.status}
              onClick={() => pageStore.excute(record.methodName)}
              loading={pageStore.recordLoding}
            >
            历史版本对比
            </Button>
          </Row>
        ),
      },
    ],
    [pageStore],
  );

  return (
    <div className="page-form-demo page-content">
      <Divider dashed />
      <Button type="primary" >
      com.stock.qfii.commisionmgr.CommisionManager:reckoningCommision(long)
      </Button>
      <Table
        style={{ paddingTop: '20px' }}
        loading={pageStore.loading}
        columns={columns}
        dataSource={toJS(pageStore.tableData)}
        rowKey="id"
        pagination={toJS(pageStore.pagination)}
      />
    </div>
  );
};

export default observer(HomePage);

